<template>
  <div class="contains">
    <div class="input">
      <el-input type="textarea" autosize placeholder="请输入裁判文书内容" v-model="doc_text"/>
      <el-button @click="toGenerateKGGraph">生成</el-button>
    </div>
    <div class="show-result">
      结果展示区域
      <KGraph id="kg-show" :kg_data="kg_data">知识图谱展示</KGraph>
    </div>
  </div>
</template>
<script>
import KGraph from '@/components/EchartGraphs/KGraph/index.vue'
import { generateKGGraph } from '@/api/graph'
import { Message } from 'element-ui'

export default {
  components: { KGraph },
  methods: {
    toGenerateKGGraph: function() {
      if(!this.doc_text) return Message.error('请填写裁判文书内容')
      generateKGGraph({ doc: this.doc_text }).then(resp => {
        console.log(resp)
        if(resp.code !== 200) return Message.error(resp.message)
        this.$set(this, 'kg_data', resp.data)
        Message.success(resp.message)
      })
    }
  },
  data() {
    return {
      doc_text: '',
      kg_data: {
        categories: [{ name: '贾家荣国府' }, { name: '贾家宁国府' }],
        nodes: [
          { category: 1, id: 0, name: '贾政' }, { category: 0, id: 1, name: '赵姨娘' },
          { category: 0, id: 2, name: '贾探春' }, { category: 0, id: 3, name: '贾探春' },
          { category: 0, id: 4, name: '贾探春' }
        ],
        links: [
          { source: 1, target: 2, value: '母亲' }, { source: 0, target: 2, value: '父亲' },
          { source: 2, target: 1, value: '女儿' }, { source: 2, target: 0, value: '女儿' },
          { source: 1, target: 0, value: '女儿' }, { source: 4, target: 0, value: '女儿' }
        ]
      }
    }
  }
}

</script>

<style scoped lang="scss">
.contains {
  display: flex;
  flex-direction: column;
  align-items: center;
  .input {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    & > div {
      margin: 20px;
    }
  }
  .show-result {
    width: 90%;
    height: 500px;
  }
}

</style>